<template>
    <el-dialog v-model="show" title="修改类型" width="800px" @close="closeModal">
        <el-form :model="form" label-width="80px">
            <el-form-item label="类型名称" required>
                <el-input v-model="form.presentAttr" placeholder="请输入字段名称" disabled></el-input>
            </el-form-item>
            <el-form-item label="关键类型">
                <el-select style="width: 100px;" v-model="form.prefixAttr" placeholder="请选择前置属性">
                    <el-option v-for="item in prefixAttrList" :key="item" :label="item" :value="item"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="类型图片">
                <el-upload action="#" list-type="picture-card" :auto-upload="false" multiple :limit="3"
                    :file-list="form.fileList" :on-preview="handlePictureCardPreview">
                    <el-icon>
                        <Plus />
                    </el-icon> </el-upload>
            </el-form-item>
        </el-form>
        <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" alt="图像预览" />
        </el-dialog>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="closeModal">取消</el-button>
                <el-button type="primary" @click="handleConfirm">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { ElMessage } from 'element-plus';
import { onMounted, reactive, toRef, toRefs, watch } from 'vue';
import { errMsg } from '@/utils/errorMsg';
import { Plus } from '@element-plus/icons-vue';

defineOptions({
    name: 'EditModal'
})
const props = defineProps({
    open: {
        type: Boolean,
        required: true
    },
    data: {
        type: Object,
        required: true
    }
})
const emits = defineEmits(['closeModal', 'reload'])

let prefixAttrList = ref([])
const state = reactive({
    form: {
        fileList: []
    },
    dialogVisible: false,
    dialogImageUrl: ''
})

const { form, dialogVisible, dialogImageUrl } = toRefs(state)
watch(() => props.open, val => {
    show.value = val
    form.value = Object.assign({}, props.data)
})
const show = ref(false)

function closeModal() {
    show.value = false
    emits('closeModal')
}

function handleConfirm() {
    try {
        // 接口请求
        if (props.isUpdate) {
            ElMessage.success('修改成功')
            emits('reload', form.value, true)
        } else {
            ElMessage.success('新增成功')
            emits('reload', form.value, false)
        }
        // emits('reload', form.value)
    } catch (error) {
        console.error('未知错误', error)
        // 请求失败处理
        ElMessage.error('修改失败：' + errMsg(error))
    }
    closeModal()
}

function handlePictureCardPreview(uploadFile) {
    dialogImageUrl.value = uploadFile.url
    dialogVisible.value = true
}

</script>
<style lang="scss" scoped>
.custom-table {
    --el-table-border: 1px solid #ccc;
    --el-table-border-color: #ccc;
}
</style>